/* global document */
import React from 'react'
import PropTypes from 'prop-types'
import {Button, AutoComplete, Col, DatePicker, Form, Icon, Input, InputNumber, Row, Select} from 'antd'
import classnames from 'classnames'
import styles from './Filter.less'
import {message} from "antd/lib/index"

const FormItem = Form.Item
const {Option} = Select

const ColProps = {
  xs: 6,
  sm: 6,
  style: {
    marginBottom: 6,
  },
}

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
  style: {
    marginBottom: 10,
  },
}

const Filter = ({
                  expandForm,
                  filter,
                  departments,
                  figureIp,
                  friendCircleType,
                  source,
                  operateStatus,
                  empList,
                  handleSearch,
                  stat,
                  onFilterChange,
                  toggleForm,
                  form: {
                    getFieldDecorator,
                    getFieldsValue,
                    setFieldsValue,
                  },
                }) => {

  const getTotal = (stat) => {
    let count = 0
    stat.forEach(val => count += parseInt(val.y))
    return count
  }

  const getCount = (key, stat) => {
    let count = 0
    stat.forEach(val => {
      if (key === val.x) {
        count = val.y
        return
      }
    })
    return count
  }

  const status = [
    {
      id: 0,
      name: '运营号总数',
      color: 'rgb(240, 72, 100)',
      icon: 'team',
      count: getTotal(stat),
    },
    {
      id: 1,
      name: '在线个数',
      color: 'rgb(47, 194, 91)',
      icon: 'link',
      count: getCount('在线', stat),
    },
    {
      id: 3,
      name: '退登个数',
      color: 'rgb(250, 204, 20)',
      icon: 'logout',
      count: getCount('退登', stat),
    },
    {
      id: 2,
      name: '离线个数',
      color: 'rgba(0, 0, 0, 0.45)',
      icon: 'disconnect',
      count: getCount('离线', stat),
    },
    {
      id: 4,
      name: '手动添加',
      color: 'rgb(19, 194, 194)',
      icon: 'user-add',
      count: getCount('手动', stat),
    },
  ]

  const handleFields = (fields) => {
    const {minRegisterTime, maxRegisterTime, minctime, maxctime} = fields
    if (minRegisterTime) {
      fields.minRegisterTime = minRegisterTime.format('YYYY-MM-DD')
    }
    if (maxRegisterTime) {
      fields.maxRegisterTime = maxRegisterTime.format('YYYY-MM-DD')
    }
    if (minctime) {
      fields.minctime = minctime.format('YYYY-MM-DD')
    }
    if (maxctime) {
      fields.maxctime = maxctime.format('YYYY-MM-DD')
    }
    return fields
  }

  const handleFormReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }

  const valid = fields => {
    const {type, keyword} = fields

    if (!type && keyword) {
      message.warn("请选择查询类型")
      return false
    }

    return true
  }

  const handleSubmit = () => {
    let fields = getFieldsValue()
    if (!valid(fields)) {
      return
    }
    fields = handleFields(fields)
    onFilterChange(fields)
  }

  const handleChange = (key, values) => {
    let fields = getFieldsValue()
    fields[key] = values
    fields = handleFields(fields)
    onFilterChange(fields)
  }
  // const {type, keyword} = filter

  const simpleFields = [
    (
      <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        <FormItem {...formItemLayout} label="运营微号">
          {getFieldDecorator('wxId')(<Input placeholder="运营微信号"/>)}
        </FormItem>
      </Col>
    ),
    (
      <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        <FormItem {...formItemLayout} label="归属员工">
          {getFieldDecorator('belongEmpId')(
            <AutoComplete
              dataSource={empList.map(item => <Option key={item.id}>{item.name}</Option>)}
              style={{width: '100%'}}
              onSearch={handleSearch}
              placeholder="员工编号或名称"
            />,
          )}
        </FormItem>
      </Col>
    ),
    (
      <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        <FormItem {...formItemLayout} label="在线状态">
          {getFieldDecorator('status')(
            <Select allowClear placeholder="请选择状态">
              {status.filter(item => item.id !== 0).map(item => {
                return <Option value={item.id}>{item.name.substring(0, 2)}</Option>
              })}
            </Select>,
          )}
        </FormItem>
      </Col>
    ),
  ]

  const renderSimpleForm = () => (
    <Form layout="horizontal">
      <Row gutter={24}>
        {simpleFields}
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem label={''}>
            <Button className="margin-right" type="primary" onClick={handleSubmit}>查询</Button>
            <Button onClick={handleFormReset}>重置</Button>
            <a style={{marginLeft: 8}} onClick={toggleForm}>展开 <Icon type="down"/></a>
          </FormItem>
        </Col>
      </Row>
    </Form>
  )

  const renderAdvancedForm = () => (
    <Form layout="horizontal">
      <Row gutter={24}>
        {simpleFields}
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="推广员工">
            {getFieldDecorator('prompterId')(
              <AutoComplete
                dataSource={empList.map(item => <Option key={item.id}>{item.name}</Option>)}
                style={{width: '100%'}}
                onSearch={handleSearch}
                placeholder="员工编号或名称"
              />,
            )}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="公司部门">
            {getFieldDecorator('belongDeptId')(
              <Select allowClear placeholder="请选择部门">
                {departments.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="微信昵称">
            {getFieldDecorator('nickname')(<Input placeholder="请输入"/>)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="人物IP">
            {getFieldDecorator('ipId')(
              <Select allowClear placeholder="请选择">
                {figureIp.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="朋友圈类型">
            {getFieldDecorator('friendCircleTypeId')(
              <Select allowClear placeholder="请选择">
                {friendCircleType.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="自身来源">
            {getFieldDecorator('sourceId')(
              <Select allowClear placeholder="请选择">
                {source.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="运营状态">
            {getFieldDecorator('operateStatusId')(
              <Select allowClear placeholder="请选择">
                {operateStatus.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="绑定号码">
            {getFieldDecorator('bindPhoneNum')(<Input placeholder="请输入"/>)}
          </FormItem>
        </Col>

        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="被封次数">
            {getFieldDecorator('bannedTimes')(<InputNumber placeholder="请输入"/>)}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="设备码">
            {getFieldDecorator('deviceSn')(<Input placeholder="请输入"/>)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem label="inline" {...formItemLayout} label="好友总数">
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('minFriendNum')(<Input placeholder="最小值"/>)}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('maxFriendNum')(<Input placeholder="最大值"/>)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <FormItem {...formItemLayout} label="未更新天数">
            {getFieldDecorator('unUpdateFriendCircleDays')(<InputNumber placeholder="请输入"/>)}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 9}} md={4} sm={24}>
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 18}} label="注册日期">
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('minRegisterTime')(<DatePicker style={{width: '100%'}} placeholder="开始时间"/>)}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('maxRegisterTime')(<DatePicker style={{width: '100%'}} placeholder="结束时间"/>)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{span: 9}} md={4} sm={24}>
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 18}} label="录入日期">
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('minctime')(<DatePicker style={{width: '100%'}} placeholder="开始时间"/>)}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('maxctime')(<DatePicker style={{width: '100%'}} placeholder="结束时间"/>)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
        </Col>
        <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
          <div style={{display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', float: 'left'}}>
            <Button className="margin-right" type="primary" onClick={handleSubmit}>查询</Button>
            <Button onClick={handleFormReset}>重置</Button>
            <a style={{marginLeft: 8}} onClick={toggleForm}>收起 <Icon type="up"/></a>
          </div>
        </Col>
      </Row>
    </Form>
  )

  const renderForm = () => {
    return expandForm ? renderAdvancedForm() : renderSimpleForm()
  }

  return (
    <div>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 1}} md={{span: 2}} sm={{span: 6}}>
        </Col>
        {status.map(item => (
          <Col {...ColProps} xl={{span: 4}} md={{span: 4}} sm={{span: 12}}>
            <div className={classnames(styles['flex-status-bar'])} style={{color: `${item.color}`}}>
              <Icon type={item.icon} style={{fontSize: 20}} theme="outlined"/>&nbsp;
              <span>{item.name}：<span style={{fontWeight: 'bold', fontSize: 18}}>{item.count}</span></span>
            </div>
          </Col>
        ))}
      </Row>
      {renderForm()}
    </div>
  )
}

Filter.propTypes = {
  onAdd: PropTypes.func,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Form.create()(Filter)
